<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/utils/mock-min.js"></script>
    <script src="../js/utils/jquery.min.js"></script>
    <script src="../js/api/mockaddtea.js"></script>
    <script src="../js/utils/addid.js"></script>
    <style>
        .showImg {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .showImg img {
            width: 100%;
            height: 100%;
        }

        .bookbox {
            width: 400px;
            height: 600px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="bookbox">
        茶叶名称：<input type="text" id="teaName" /><br />
        <input type="file" id="fileInput" onchange="getImgName()" /><br />
        <div class="showImg"></div><br>
        茶叶类型：<select name="" id="teaSelect">
            <option value="0">绿茶</option>
            <option value="1">黄茶</option>
            <option value="2">乌龙茶</option>
            <option value="3">红茶</option>
            <option value="4">黑茶</option>
            <option value="5">白茶</option>
            <option value="6">花茶</option>
        </select><br />
        茶叶价格：<input type="text" id="teaPrice" /><br />
        茶叶信息：<textarea name="" id="textarea"></textarea>
        <button onclick="addTea()">添加茶叶</button>
    </div>
</body>
<script>
    class Tea {
        constructor(teaid, teaname, teatype, teaimg, teaprice, teadescribe) {
            this.teaid = teaid;
            this.teaname = teaname;
            this.teatype = teatype;
            this.teaimg = teaimg;
            this.teaprice = teaprice;
            this.teadescribe = teadescribe;
        }

    }
    function getImgName() {
        let file = document.getElementById("fileInput");
        let fileObj = file.files;
        let showImg = document.getElementsByClassName("showImg")[0];
        let src = `<img src="../imgs/${fileObj[0].name}">`;
        showImg.innerHTML = src;
        return fileObj[0].name;
    }
    function addTea() {
        $.ajax({
            type: "post",
            url: "/js/addTeaGetLocal",
            data: null,
            dataType: "json",
            success: function (data) {
                let teaarr = data;
                let teaid;
                if (teaarr == "" || teaarr == null || teaarr == undefined || teaarr == []) {
                    teaid = 1;
                } else {
                    // 本地存储存在
                    let teaarr1 = JSON.parse(teaarr);
                    teaid = getNewId(teaarr1);
                }
                // 获取茶叶的类型 options
                let selectObj = document.getElementById("teaSelect");
                let optionObj = document.getElementsByTagName("option");
                let index = 0;
                for (let i = 0; i < optionObj.length; i++) {
                    if (optionObj[i].selected == true) {
                        index = optionObj[i].value;
                    }
                }
                let teaName = document.getElementById("teaName").value;
                let teaPrice = document.getElementById("teaPrice").value;
                let teaDescribe = document.getElementById("textarea").value;
                let teaimgname = getImgName();
                let tea1 = {
                    teaid: teaid,
                    teaname: teaName,
                    teatype: index,
                    teaimg: teaimgname,
                    teaprice: teaPrice,
                    teadescribe: teaDescribe
                }
                $.ajax({
                    type: "post",
                    url: "/js/addTea",
                    data: JSON.stringify(tea1),
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            alert("添加成功");
                            window.location.href = "./home.html";
                        } else {
                            alert("该茶叶已存在");
                        }
                    }
                })
            }
        })
    }
</script>
<script src="../js/components/qiangzhilogin.js"></script>

</html>